<!--
 * @Author: atao
 * @Date: 2023-10-21 11:17:12
 * @LastEditTime: 2023-10-27 17:28:54
 * @FilePath: \三阶段项目\pili-pili-app\src\pages\register\index.vue
-->
<template>
  <div class="re-box">
    <van-nav-bar title="注册" left-arrow @click-left="router.go(-1)" />
    <div class="poster">pilipili<span>快乐生活</span></div>
    <van-form label-align="left" :colon="true" ref="myNode">
      <van-cell-group inset>
        <van-field :required="true" v-model="user.name" name="用户名" label="用户名" placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field :required="true" v-model="user.password" type="password" name="密码" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" />

        <van-field name="uploader" label="头像上传">
          <template #input>
            <van-uploader :after-read="afterRead" max-count="1" v-model="photos" />
          </template>
        </van-field>
        <van-field v-model="user.address" is-link readonly name="area" label="地址选择" placeholder="点击选择地址"
          @click="showAddress = true" />
        <van-popup v-model:show="showAddress" position="bottom">
          <van-area :area-list="areaList" @confirm="onAdressConfirm" @cancel="showAddress = false" />
        </van-popup>
        <van-field v-model="user.birthday" is-link readonly name="datePicker" label="生日" placeholder="点击选择生日"
          @click="showBirthday = true" />
        <van-popup v-model:show="showBirthday" position="bottom">
          <van-date-picker :min-date="minDate" :max-date="maxDate" @confirm="onBirthdayConfirm"
            @cancel="showBirthday = false" />
        </van-popup>
        <van-field :required="true" v-model="user.phone" name="电话号码" label="电话号码" placeholder="电话号码" :rules="[
          {
            required: true,
            pattern: /^1[3-9]{1}[0-9]{9}$/,
            message: '请填写电话号码',
          },
        ]" />
        <van-field v-model="user.email" name="邮箱" label="邮箱" placeholder="邮箱" />
        <van-field v-model="user.remark" name="备注" label="备注" rows="2" autosize placeholder="备注" type="textarea"
          maxlength="100" show-word-limit />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button @click="submitEvt" :loading="loading" round block type="primary" native-type="submit">
          注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script lang="ts" setup>
import { Ref } from "vue";
import { ref } from "vue";
//vant地市插件
import { areaList } from "@vant/area-data";
//dayjs插件
import dayjs from "dayjs";
import { base64UploadApi, userRegisterApi } from "../../apis/registerApis";
import { showToast } from "vant";
import { Router, useRouter } from "vue-router";
const photos = ref([]);
const user: Ref<UserInfo> = ref({
  id: "",
  name: "",
  password: "",
  photo: "",
  sex: "",
  address: "",
  birthday: "",
  phone: "",
  email: "",
  remark: "",
});
/** afterRead--uploader组件的文件上传后的回调方法 */
async function afterRead(_arg: any) {
  console.log(_arg);
  let _file: File = _arg.file;
  let _str: string = _arg.content;
  let _res: any = await base64UploadApi(_str, _file.name);
  if (_res.code === 200) user.value.photo = _res.data;
}

//选择地址
const showAddress = ref(false);
//选择地址的确认方法
function onAdressConfirm({ selectedOptions: list }: any) {
  console.log(list.map((it: any): string => it.text));
  user.value.address = list.map((it: any): string => it.text).join("/");
  showAddress.value = false;
}
//选择生日
const minDate = new Date(dayjs().subtract(50, "year").format("YYYY-MM-DD"));
const maxDate = new Date(2025, 5, 1);
const showBirthday = ref(false);
//选择生日的确认方法
function onBirthdayConfirm({ selectedValues: list }: any) {
  user.value.birthday = list.join("/");
  showBirthday.value = false;
}
//注册事件
const myNode = ref();
const router: Router = useRouter()
// const node: Ref = ref()
//设置按钮加载状态
const loading: Ref<boolean> = ref(false)
function submitEvt() {

  if (loading.value) return
  //validatey返回一个promise
  myNode.value.validate().then(async () => {
    loading.value = true
    let _res = await userRegisterApi({
      ...user.value,
      id: user.value.phone
    })
    loading.value = false
    if (_res.code === 200) {
      //vant 轻提示组件
      showToast({
        message: '注册成功，请登陆',
        position: 'top'
      })
      router.push('/login')
    } else {
      showToast({
        message: '注册失败，请重试' + _res.message,
        position: 'top'
      })
    }
  }).catch(() => { })
}
</script>
<style lang="less" scoped>
@import "../../style/common.less";

.re-box {
  .rel();

  .poster {
    width: calc(100%-50px);
    margin: 10px 20px;
    height: 50px;
    background: @b5;
    line-height: 50px;
    vertical-align: center;
    padding: 0 10px;
    border-radius: 20px;
    background: url(../../images/22_open.4ea5f239.png) center center / 50% no-repeat @b5;
    font-weight: 600;

    span {
      display: block;
      float: right;
    }
  }
}

::v-deep .van-nav-bar__title {
  color: @b4;
}
</style>